@import '@/assets/style/index.scss';
.searchWrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    transition: all .2s ease;
    &.is-fcous {
        justify-content: center !important;
    }
    .searchPosition {
        position: relative;
        width: 320px;
        height: 40px;
        @extend .no-app-regin;
        &.addWidth {
            width: 500px;
        }
        .searchinput {
            position: absolute;
            width: 100%;
            z-index: 1001;
            background: var(--color-secondary-bg);
            display: flex;
            padding: 6px 8px 6px 8px;
            align-items: center;
            border-radius: 6px;
            transition: all .5s ease;
            &.is-fcous {
                border: 1px solid var(--color-primary);
                background: var( --color-body-bg);
            }
            input {
                width: 100%;
                height: 20px;
                background: transparent;
                border: none;
                &:focus {
                    outline: 0;
                }
            }
            .searchIconWrapper {
                display: flex;
                width: 60px;
                justify-content: space-between;
            }
            .deleteText {}
            .Search {}
        }
        .searchResult {
            position: absolute;
            z-index: 1000;
            top: -7px;
            left: -8px;
            width: 515px;
            background: var(--color-body-bg);
            box-shadow: 0 0 30px rgb(0 0 0 / 10%);
            border-radius: 8px;
            padding: 0 10px 14px 10px;
            .searchContent {
                width: 100%;
                height: 100%;
                margin-top: 60px;
                .searchTitle {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .searchHistory {
                    width: 100%;
                    overflow: hidden;
                    .historyList {
                        background: var(--color-secondary-bg-for-transparent);
                        float: left;
                        padding: 5px 8px 5px 8px;
                        margin-top: 10px;
                        font-size: 11px;
                        border-radius: 4px;
                        color: var(--color-text);
                        margin-right: 10px;
                        /*    &:not(:nth-child(1)) {
                            margin-left: 10px;
                        } */
                    }
                }
                .hotSearchList {
                    display: flex;
                    flex-wrap: wrap;
                    .hotSearchList-item {
                        display: flex;
                        justify-content: space-between;
                        width: 50%;
                        padding: 5px 8px 5px 8px;
                        box-sizing: border-box;
                        &:hover {
                            background: var(--color-secondary-bg-for-transparent);
                        }
                        .paiming {
                            flex: 0 0 20px;
                        }
                        .text {
                            flex: 1;
                            font-size: 14px;
                            margin-right: 6px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            letter-spacing: 0;
                        }
                        .tagimg {
                            flex: 0 0 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            img {
                                width: 16px;
                            }
                        }
                    }
                }
            }
            .searchList {
                width: 100%;
                margin-top: 40px;
                .searchItem {
                    &:hover {
                        background: var(--color-secondary-bg-for-transparent);
                    }
                    width: 100%;
                    height: 30px;
                    line-height: 28px;
                    padding-left: 10px;
                }
            }
        }
    }
}

.boss-text-enter,
.boss-text-exit-done {
    opacity: 0;
}

.boss-text-enter-active {
    opacity: 1;
    transition: opacity 500ms;
}

.boss-text-enter-done,
.boss-text-exit {
    opacity: 1;
}

.boss-text-exit-active {
    opacity: 0;
    transition: opacity 500ms;
}